:root {
            --text-color: #413937;
            --main-bg-color: #000000;
            font-size: 16px;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html,
        body {
            min-height: 100vh;
        }

        body {
            font-family: Meiryo, 'メイリオ', Arial, Verdana, sans-serif;
            background-color: var(--main-bg-color);
            color: white;
            display: flex;
            flex-direction: column;
            overflow-x: hidden;
            overflow-y: auto;
        }

        @keyframes ul_button_hover {
            from {
                background-color: #FAEAE8;
            }

            to {
                background-color: #C0B5B5;
            }
        }


        body::before {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: url(https://vip2.loli.io/2023/05/21/6AZvynpCUgq3o4N.jpg) 50% 22% no-repeat;
            background-size: cover;
            z-index: -2;
        }

        #noel_chan {
            position: fixed;
            top: 50%;
            left: 50%;
            width: 100%;
            height: 100%;
            transform: translate(-50%, -50%);
            background: url(https://vip2.loli.io/2023/05/21/1AUyoPvE68Zql2C.png) 50% 15% no-repeat;
            z-index: -1;
        }

        .main-content {
            flex-grow: 1;
            position: relative;
        }

        #logo {
            position: absolute;
            top: 52%;
            left: 25%;
            transform: translate(-50%, -50%);
            width: 50vw;
            height: 60vh;
            max-width: 803px;
            max-height: 440px;
            background: url(https://vip2.loli.io/2023/05/21/WsKdeqXFZ9Ax34z.png) 50% 50% no-repeat;
            background-size: contain;
            aspect-ratio: 803 / 440;
        }

        h1 {
            font-size: 0;
        }

        #top_link.uibox {
            position: absolute;
            top: 49%;
            left: 75%;
            transform: translate(-50%, -50%);
            width: 40vw;
            min-width: 300px;
            max-width: 720px;
            border-radius: 30px;
            padding: 15px 30px;
            background:
                url(https://vip2.loli.io/2023/05/21/j46qel3ovciWYXw.png) left top no-repeat,
                url(https://vip2.loli.io/2023/05/21/UrKXFwf6eslSGT5.png) right top no-repeat,
                url(https://vip2.loli.io/2023/05/21/3yLAQXZFM54WOjN.png) right bottom no-repeat,
                url(https://vip2.loli.io/2023/05/21/grNVW7m6vHnJUih.png) left bottom no-repeat,
                url(https://vip2.loli.io/2023/05/21/bSNFfEgziy9IXQm.png) left top repeat-x,
                url(https://vip2.loli.io/2023/05/21/nVC2BL3RxAKaQ8Z.png) left bottom repeat-x,
                linear-gradient(rgba(230, 226, 217, 0.8), rgba(201, 200, 197, 0.8));
            background-origin: border-box;
            background-clip: border-box, border-box, border-box, border-box, border-box, border-box, padding-box;
        }

        #top_link.uibox:before,
        #top_link.uibox:after {
            position: absolute;
            top: 0;
        }

        .uibox:before,
        .uibox:after {
            content: "";
            width: 30px;
            height: 100%;
            box-sizing: border-box;
            padding-top: 45px;
            padding-bottom: 45px;
            background-clip: content-box;
        }

        .uibox:before {
            left: 0;
            background-image: url(https://vip2.loli.io/2023/05/21/bocw8t3uHzUMlQR.png);
            background-repeat: repeat-y;
        }

        .uibox:after {
            right: 0;
            background-image: url(https://vip2.loli.io/2023/05/21/FXgJK6mf273xq5M.png);
            background-repeat: repeat-y;
            background-position: right top;
        }

        .uibox .content {
            padding: 18px 12px;
            color: var(--text-color);
        }

        .ul_buttons {
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 1rem;
        }

        .ul_buttons li {
            width: calc(50% - 0.5rem);
            text-align: center;
        }

        .ul_buttons li a {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 43px;
            border-radius: 8px;
        }

        .ul_buttons li a img {
            display: block;
            height: 1.5rem;
            width: auto;
            object-fit: contain;
        }

        .btn_discord a,
        .btn_twitter a {
            height: 32px;
        }

        .btn_discord a img,
        .btn_twitter a img {
            height: 1.8rem;
        }


        hr {
            border: none;
            height: 1px;
            background-color: #554C4A;
            margin: 1.5rem 4%;
        }

        .blocklink {
            display: block;
            text-align: center;
            font-size: 0.85rem;
            color: #554C4A;
            text-decoration: none;
            font-weight: bold;
            padding: 0.25rem;
            border-radius: 5px;
        }

        .ul_buttons li a:hover,
        .blocklink:hover {
            text-decoration: none;
            color: #2E2726;
            animation: ul_button_hover 0.3s alternate ease-in-out forwards infinite;
        }

        #footer {
            width: 100%;
            padding: 30px 0 15px;
            text-align: center;
            font-size: 90%;
            background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 55%, rgba(0, 0, 0, 0.5) 100%);
            background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 55%, rgba(0, 0, 0, 0.5) 100%);
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 55%, rgba(0, 0, 0, 0.5) 100%);
            flex-shrink: 0;
            z-index: 10;
            position: relative;
            margin-top: auto;
        }

        #footer .description {
            font-size: 80%;
            margin-block-end: 0.8em;
        }

        #footer a {
            font-weight: bold;
            color: white;
            text-decoration: underline;
        }

        #footer a:hover {
            color: #D3D3D3;
        }

        @media (max-width: 1100px) {

            .main-content {
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: center;
                padding: 10vh 0 1rem;
                gap: 2rem;
            }

            #logo {
                position: static;
                transform: none;
                top: auto;
                left: auto;
                width: 70vw;
                max-width: 500px;
                max-height: 35vh;
                height: auto;
            }

            #top_link.uibox {
                position: relative;
                transform: none;
                top: auto;
                left: auto;
                width: 75%;
                max-width: 450px;
                margin-bottom: 50px;
                padding: 15px 25px;
            }

            .ul_buttons {
                gap: 0.8rem 0.5rem;
            }

            .ul_buttons li {
                width: calc(50% - 0.3rem);
            }

            .ul_buttons li a img {
                height: 1.4rem;
            }

            .btn_discord a img,
            .btn_twitter a img {
                height: 1.7rem;
            }

            .uibox:before,
            .uibox:after {
                width: 25px;
                padding-top: 35px;
                padding-bottom: 35px;
            }
        }

        @media (max-width: 767px) and (orientation: portrait) {
            :root {
                font-size: 18px;
            }

            .main-content {
                padding: 5vh 0 1rem;
                gap: 1rem;
            }

            #logo {
                width: 85vw;
                max-width: 400px;
                max-height: 25vh;
            }

            #top_link {
                width: 90vw;
                max-width: 400px;
                margin-bottom: 40px;
                padding: 10px 15px;
            }

            .ul_buttons {
                flex-direction: column;
                flex-wrap: nowrap;
                gap: 0.5rem;
            }

            .ul_buttons li {
                width: 100%;
            }

            .ul_buttons li a {
                height: 3.5rem;
            }

            .ul_buttons li a img {
                height: 1.8rem;
            }

            .btn_discord a img,
            .btn_twitter a img {
                height: 2.2rem;
            }

            .uibox:before,
            .uibox:after {
                width: 20px;
                padding-top: 30px;
                padding-bottom: 30px;
            }
        }